import { React, useRef } from 'react';
import './changephone2.css';
import '../../../index.css';
import yanzhengma from '../../../login_module/loginID/img/verify.png'
import { useLocation } from 'react-router';
import InterIP from '../../../IP/IP';
import axios from 'axios';
import { useNavigate } from 'react-router';

export default function Changephone2() {


  const data = useLocation();
  const newIphone = useRef()
  const navigate = useNavigate()
  console.log(data);

  function submit() {
    var userID = document.cookie.slice(5);
    let IP = InterIP().props.children;
    if (newIphone.current.value === '') {
      alert('请输入正确的手机号')
    }
    else {
      axios.post("http://" + IP + ":3000/user/updateUser", {
        user_header: data.state.data.user_header,
        nickname: data.state.data.nickname,
        sex: data.state.data.sex,
        birthday: data.state.data.birthday,
        user_name: newIphone.current.value,
        user_id: userID,
      })
        .then((res) => {
          console.log(res);
          alert('修改成功')
          navigate("/home/person/changephone3", {})
        })
    }
  }


  return (
    <div id="changePhone">
      <div className="changePhone_top">换绑手机</div>
      <div className="changephone_main">
        <div className="changephone_daohang">
          <div className="changephone_dao1"><span>1.验证原手机号</span></div>
          <div className="changephone_dao2"></div>
          <div className="changephone_dao1" id="changephone_liang"><span>2.验证新手机号</span></div>
          <div className="changephone_dao2" id="changephone_liang2"></div>
          <div className="changephone_dao1"><span>3.换绑成功</span></div>
        </div>
        <input type="text" placeholder="请输入新手机号" className="changephone_lie" ref={newIphone}></input>
        <div id="login_yanzheng" className="changephone_lie">
          <input type="text" id="yanzhengma" placeholder="验证码"></input>
          <img src={yanzhengma} alt=""></img>
          <span>看不清换一张</span>
        </div>
        <div className="login_phonecode changephone_lie">
          <input type="text" placeholder="手机验证码"></input>
        </div>

        <div className="changephone_lie">
          <button onClick={submit}>提交验证</button>
        </div>

      </div>

    </div>
  )
}
